<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI选股 - 个人中心</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="app-container">
        <!-- 导航栏 -->
        <div class="navbar">
            <div class="navbar-btn invisible">
                <i class="fas fa-arrow-left"></i>
            </div>
            <div class="navbar-title">个人中心</div>
            <div class="navbar-btn">
                <i class="fas fa-cog"></i>
            </div>
        </div>

        <!-- 主内容区域 -->
        <div class="content">
            <!-- 用户信息 -->
            <div class="profile-header">
                <div class="avatar">
                    <i class="fas fa-user"></i>
                </div>
                <div class="username">张小明</div>
                <div class="text-sm opacity-80 mt-1">股票小白 · 成长中的投资者</div>
                <div class="flex justify-center mt-3">
                    <div class="text-center mx-4">
                        <div class="text-lg font-medium">12</div>
                        <div class="text-xs opacity-80">关注股票</div>
                    </div>
                    <div class="text-center mx-4">
                        <div class="text-lg font-medium">28</div>
                        <div class="text-xs opacity-80">记录天数</div>
                    </div>
                    <div class="text-center mx-4">
                        <div class="text-lg font-medium">6.8%</div>
                        <div class="text-xs opacity-80">收益率</div>
                    </div>
                </div>
            </div>

            <!-- 持仓概览 -->
            <div class="card">
                <div class="card-title flex justify-between items-center">
                    <span>持仓概览</span>
                    <span class="text-xs text-blue-500">详情 <i class="fas fa-chevron-right text-xs"></i></span>
                </div>
                <div class="card-content">
                    <div class="flex justify-between items-center mb-4">
                        <span class="text-sm text-gray-500">总持仓市值 (元)</span>
                        <span class="text-lg font-bold">128,659.25</span>
                    </div>
                    
                    <div class="bg-gray-100 rounded-lg p-3">
                        <div class="flex justify-between mb-2">
                            <span class="text-sm">持仓成本</span>
                            <span class="font-medium">120,432.18</span>
                        </div>
                        <div class="flex justify-between mb-2">
                            <span class="text-sm">持仓数量</span>
                            <span class="font-medium">8支</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-sm">浮动盈亏</span>
                            <span class="font-medium text-red-500">+8,227.07</span>
                        </div>
                    </div>
                    
                    <div class="flex justify-between gap-2 mt-3">
                        <button class="btn btn-primary flex-1">
                            <i class="fas fa-plus-circle text-sm mr-1"></i> 添加持仓
                        </button>
                        <button class="btn btn-secondary flex-1">
                            <i class="fas fa-minus-circle text-sm mr-1"></i> 减仓操作
                        </button>
                    </div>
                </div>
            </div>



            <!-- 版本信息 -->
            <div class="text-center text-gray-400 text-xs mt-8 mb-6">
                <p>AI选股 v1.0.0</p>
                <p class="mt-1">©2023 AI选股 保留所有权利</p>
            </div>
        </div>

        <!-- 底部标签栏 -->
        <div class="tabbar">
            <div class="tab-item">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-chart-line"></i>
                <span>每日推荐</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-list-ul"></i>
                <span>自选</span>
            </div>
            <div class="tab-item active">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>
    </div>
</body>
</html> 